<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- v-big 和v-text功能类似 但会将绑定数值放大十倍 -->
		<!-- 定义一个 v-fbind 和v-bind功能类似 但会将绑定数值放大十倍 -->
		<div id="big">
			<h3>{{name}}</h3>
			<h2>当前的n值是：<span v-text="n"></span></h2>
			<h2>放大十倍的n值是：<span v-big="n"></span></h2>
			<button type="button" @click="n++">点击+1</button>
			<hr >
			<input type="text"  :value="n" />
			<br>
			<input type="text"  v-fbind:value="n" />
		</div>
		
		<!-- <div id="root2">
			全局指令<br>
			<input type="text"  v-fbind:value="x" />
		</div> -->
		<script type="text/javascript">
			
			// fbind 修改为全局指令
			// Vue.directive('fbind',
			// 	{
			// 		// 指令与元素绑定成功时执行
			// 		bind:function(el,binding){
			// 			// console.info('bind');
			// 			el.value = binding.value*2;
			// 		},
			// 		// 指令所在元素被插入页面时
			// 		inserted(el,binding){
			// 			// console.info('inserted');
			// 			el.focus();
			// 		},
			// 		// 指令所在模板被重新解析时
			// 		update(el,binding){
			// 			// console.info('update');
			// 			el.value = binding.value*2;
			// 			// el.focus();
			// 		},
			// 	},
			// )
			
			var big = new Vue({
				el:"#big",
				data:{
					name:"尚硅谷",
					n:1,
				},
				// 自定义指令
				directives:{
					// big 函数何时会被调用 
					// 1、指令与元素成功绑定时  2、指令所在模板被重新解析时
					big:function(el,binding){
						// console.log(el,binding);
						// console.info('big');
						// return 90
						console.log('big',this);
						el.innerText = binding.value * 10;
					},
					
					// 不同的写法
					// big(el,binding){
					// 	// console.log(el,binding);
					// 	// console.info('big');
					// 	// return 90
					// 	el.innerText = binding.value * 10;
					// },
					
					// fbind(el,binding){
					// 	el.value = binding.value;
					// 	el.focus();
					// },
					
					fbind:{
						// 指令与元素绑定成功时执行
						bind:function(el,binding){
							// console.info('bind');
							el.value = binding.value*2;
						},
						// 指令所在元素被插入页面时
						inserted(el,binding){
							// console.info('inserted');
							el.focus();
						},
						// 指令所在模板被重新解析时
						update(el,binding){
							// console.info('update');
							el.value = binding.value*2;
							// el.focus();
						},
					},
				}
			})
			
			// new Vue({
			// 	el:"#root2",
			// 	data:{
			// 		x:1,
			// 	}
			// })
		</script>
		
	</body>
</html>
